<!DOCTYPE html>
<html lang="en">
<head>
    <title>团队组建考核报表App</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        [v-cloak] {
            display: none;
        }

        .moduleName {
            height: 28px;
            line-height: 28px;
            font-size: 22px;
            border-bottom: 1px solid #ddd;
            text-align: left;

        }

        .lineOne {
            text-align: center;
            max-width: 50px;
        }

        .content {
            padding: 10px 12px;
        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            padding: 10px 0;
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
            overflow: hidden;

        }

        .infoReport {
            display: flex;
            justify-content: flex-start;
            text-align: left;
            margin-left: 10px;
        }

        .infoReport div {
            margin: 0 10px;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: center;
        }

        .lineOneNoMore {
            text-align: left;
        }

        .lineOneNoMore span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .mScrollBox {
            float: left;
            position: relative;
        }

        .imgStyle {
            width: 300px;
            height: 400px;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 20px;
            top: -12px;
        }

        .table > thead > tr > th {
            padding: 0;
        }

        .table > tbody > tr > td {
            position: relative;
        }

        .selectBox {
            height: 25px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<section class="content" id="app" style="min-height: 100vh" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="row iframeH">
        <div class="col-md-12">
            <!--<div class="selectBox">-->
            <!--<input type="text" placeholder="日期"-->
            <!--v-model="selectParameter.day"-->
            <!--@focus="showDatePicker($event)"-->
            <!--placeholder="请选择日期"-->
            <!--class="form-control pull-left input-sm col-md-8"-->
            <!--style="width: 190px; margin-left: 1px;">-->
            <!--<button type="button" class="pull-right btn oaBtn btn-sm col-md-4"-->
            <!--@click="searchDate"-->
            <!--style="margin-right: 5px;width: 70px;height: 25px">查询-->
            <!--</button>-->
            <!--</div>-->
            <div>
                <!--集团-->
                <table class="table table-bordered text-center table-width" style="table-layout: auto;">
                    <thead>
                    <tr>
                        <th rowspan="2" style="width:60px;">公司</th>
                        <th rowspan="2" style="width:80px;">大区</th>
                        <th rowspan="2" style="width: 75px;">责任人</th>
                        <th rowspan="2">当月罚款</th>
                        <th colspan="3" style="width: 90px;">区域经理</th>
                        <th colspan="3" style="width: 90px;">大区经理</th>
                    </tr>
                    <tr>
                        <th style="width: 30px;">标配</th>
                        <th style="width: 30px;">现有</th>
                        <th style="width: 30px;">空缺</th>
                        <th style="width: 30px;">标配</th>
                        <th style="width: 30px;">现有</th>
                        <th style="width: 30px;">空缺</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,i) in team3.list">
                        <td :rowspan="item.companyNamespan" :class="{hidden: item.companyNamedis}">
                            {{item.companyName}}
                        </td>
                        <td class="lineOne" :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''">{{item.roleName}}</span>
                            <span v-else >{{item.regionName}}</span>
                        </td>
                        <td :style="item.regionId==''?'background:#e6e6e6':''">{{item.userName}}
                        </td>
                        <td v-if="item.money&&item.money!='-'"
                            :style="item.regionId==''?'background:#e6e6e6':''"
                            style="color:#228bee;cursor: pointer"
                            @click="openDetail(thisMonth,item.userName,item.companyId,item.regionId,item.userId,item.roleName)">
                            {{item.money==0?'-':item.money}}
                        </td>
                        <td v-else :style="item.regionId==''?'background:#e6e6e6':''">-</td>
                        <!--人员配置-->
                        <td :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''">{{item.SmanagerTargetNum==0?'-':item.SmanagerTargetNum}}</span>
                            <span v-else> {{item.managerTargetNum==0?'-':item.managerTargetNum}}</span>
                        </td>
                        <td :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''">{{item.SmanagerCount==0?'-':item.SmanagerCount}}</span>
                            <span v-else>{{item.managerCount==0?'-':item.managerCount}}</span>
                        </td>
                        <td :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''"
                                  :style="item.SmanagerVacant&&item.SmanagerVacant!='-'?'color: red;':''">{{item.SmanagerVacant==0?'-':item.SmanagerVacant}}</span>
                            <span v-else
                                  :style="item.managerVacant&&item.managerVacant!='-'?'color: red;':''">{{item.managerVacant==0?'-':item.managerVacant}}</span>
                        </td>
                        <td :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''">{{item.SbigManagerTargetNum==0?'-':item.SbigManagerTargetNum}}</span>
                            <span v-else> {{item.bigManagerTargetNum==0?'-':item.bigManagerTargetNum}}</span>
                        </td>
                        <td :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''">{{item.SbigManagerCount==0?'-':item.SbigManagerCount}}</span>
                            <span v-else> {{item.bigManagerCount==0?'-':item.bigManagerCount}}</span>
                        </td>
                        <td :style="item.regionId==''?'background:#e6e6e6':''">
                            <span v-if="item.regionId==''"
                                  :style="item.SbigManagerVacant&&item.SbigManagerVacant!='-'?'color: red;':''">{{item.SbigManagerVacant==0?'-':item.SbigManagerVacant}}</span>
                            <span v-else
                                  :style="item.bigManagerVacant&&item.bigManagerVacant!='-'?'color: red;':''"> {{item.bigManagerVacant==0?'-':item.bigManagerVacant}}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript">
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            var text = $(this).text();
            if (text != "") {
                text = "<i></i>" + text;
                $(".div-td-content-more").html(text).css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });

    var H = $(window).height()
    $(".iframeH").height(H);

    var app = new Vue({
        el: '#app',
        data: {
            a: [],
            thisMonth: new Date().Format("yyyy-MM"),
            day: new Date().Format("yyyy-MM-dd"),//今天,
            list: [],
            team: {
                tableData: [],
                all: {}
            },
            team2: {
                list: [],
                all: {}
            },
            team3: {
                list: [],
                all: {}
            },
            selectParameter: {
                companyId: getUrlParamObj().companyId,
                day: new Date().Format("yyyy-MM-dd")//今天
            }
        },
        methods: {
            //获取合计
            getCount: function (arr, key, type) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    if (!arr[i].changeColor) {
                        number += Number(arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0);
                    }

                }
                return number;
            },
            //初始化时间控件
            showDatePicker: function (e, type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.selectParameter.day = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            getList: function () {
                var that = this;
                var data = that.selectParameter;
                $.ajax({
                    url: server.ip + urlConfig.warNewspaper.bigAchievements.getPeopleFineByCompanyId,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var dialog = {
                            dialog: 'hidden'
                        }
                        prompt(JSON.stringify(dialog))

                        var res = JSON.parse(r)
                        var data = trimRN2(res.data.sendData).records;
                        var a = [];

                        function isZai(userName, userMoney) {
                            for (var i = 0; i < a.length; i++) {
                                if (userName === a[i].userName) {
                                    if (userMoney == a[i].userMoney) {
                                        return true;
                                    }
                                }
                            }
                        }

                        for (var i = 0; i < data.length; i++) {
                            if (i == 0) {
                                a.push({
                                    "userName": data[i].userName,
                                    "userMoney": data[i].dayMoney
                                })

                            } else {
                                if (isZai(data[i].userName, data[i].dayMoney)) {
                                    data[i].changeColor = 'gray';
                                } else {
                                    a.push({
                                        "userName": data[i].userName,
                                        "userMoney": data[i].dayMoney
                                    })
                                }
                            }
                        }
                        that.team2.list = that.tablesMergeCell(data);
                        console.log(that.team2.list)
                        that.team2.all.dayMoneyNum = that.getCount(that.team2.list, "dayMoney");
                        console.log(that.team2.all.dayMoneyNum)
                        that.team2.all.moneyNum = that.getCount(that.team2.list, "money");
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
            },
            //合并单元格
            tablesMergeCell: function (list) {
                for (field in list[0]) {
                    var k = 0;
                    while (k < list.length) {
                        list[k][field + 'span'] = 1;
                        list[k][field + 'dis'] = false;
                        for (var i = k + 1; i <= list.length - 1; i++) {
                            if (list[k][field] == list[i][field] && list[k][field] != '') {
                                list[k][field + 'span']++;
                                list[k][field + 'dis'] = false;
                                list[i][field + 'span'] = 1;
                                list[i][field + 'dis'] = true;
                            } else {
                                break;
                            }
                        }
                        k = i;
                    }
                }
                return list;
            },
            getAchievementByCompany: function () {
                var that = this;
                var data = {
                    "companyId": getUrlParamObj().companyId,
                };
                $.ajax({
                    url: server.ip + urlConfig.warNewspaper.userAchievements.getAchievementByCompany,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        console.log(r)
                        var data = trimRN2(res.data.sendData);
                        that.team.tableData = that.tablesMergeCell(data);
                        that.team.all.managerTargetNum = that.getCount(that.team.tableData, "managerTargetNum");
                        that.team.all.managerCount = that.getCount(that.team.tableData, "managerCount");
                        that.team.all.managerVacant = that.getCount(that.team.tableData, "managerVacant");
                        that.team.all.bigManagerTargetNum = that.getCount(that.team.tableData, "bigManagerTargetNum");
                        that.team.all.bigManagerCount = that.getCount(that.team.tableData, "bigManagerCount");
                        that.team.all.bigManagerVacant = that.getCount(that.team.tableData, "bigManagerVacant");
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
            },
            /*获取整个集团空缺人数及罚款*/
            getForGroupVacantAndFine: function () {
                var that = this;
                var data = {
                    day: that.selectParameter.day,
                    companyId: that.selectParameter.companyId
                }
                $.ajax({
                    url: server.ip + urlConfig.warNewspaper.bigAchievements.getForGroupVacantAndFine,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        var records = res.data.sendData.records;
                        that.team3.list = that.tablesMergeCell(records);

                    }
                });
            },
            searchDate: function () {
                var dialog = {
                    dialog: 'show'
                }
                prompt(JSON.stringify(dialog))
                this.getList()
            },
            /*获取罚款明细*/
            openDetail: function (dateTime, userName, companyId, bigRegionId, userId, roleName) {
                var that = this;
                var obj = {
                    type: 'warNewspaper',
                    url: '/reportForm/warNewspaper/detailApp.html?dateTime=' + dateTime + '&companyId=' + companyId + '&bigRegionId=' + bigRegionId + '&userId=' + userId + '&userName=' + userName + '&roleName=' + roleName,
                    id: userId,
                    name: userName,
                    dateTime: dateTime
                }
                prompt(JSON.stringify(obj))
            },
        },

        mounted: function () {
            var that = this;
            if (getUrlParamObj().companyId == '201712161613432EAF27DBCCB7D0E6CA') {
                that.selectParameter.companyId = ''
            } else {
                that.selectParameter.companyId = getUrlParamObj().companyId
                // that.getAchievementByCompany();
                // that.getList()
            }
            that.getForGroupVacantAndFine()
        }
    });

</script>
</body>